<template>
    <div class="employee-container content-container">
        <el-form :inline="true">
            <el-form-item label="关键字">
                <el-input v-model="keyword" placeholder="请输入姓名/邮箱"></el-input>
            </el-form-item>
            <el-form-item label="部门">
                <el-select :data="departments" v-model="selectDepartment">
                    <el-option label="全部" :value="-1"></el-option>
                    <el-option
                            v-for="department in departments"
                            :label="department.name"
                            :value="department.id"
                            :key="departments.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="queryEmployeeData()">查询</el-button>
                <el-button type="success" icon="el-icon-plus" @click="addEmployPage()">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="deleteEmployees()">批量删除</el-button>
                <el-button type="warning" icon="el-icon-sort-down" @click="exportExcel()">导出</el-button>
                <el-button type="warning" icon="el-icon-sort-up" @click="openDialog()">导入</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="employees" border @selection-change="employeeSelChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="email" label="email"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="dept.name" label="部门"></el-table-column>
            <el-table-column label="操作" width="180px" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="small" @click="editEmployee(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" icon="el-icon-delete" size="small" @click="delEmployee(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="content-footer">
            <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    background
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 50, 100]"
                    :total="total"
                    layout="sizes,prev,pager,next,total">
            </el-pagination>
        </div>
        <upload-dialog
                :visible="dialogVisible"
                @closeDialog="closeDialog"
        />
    </div>
</template>

<script>
    import {
        getDepartMentsApi,
        getEmployeesApi,
        delEmployeeApi,
        delEmployeesApi,
        exportEmployeeXlsApi
    } from '@/request/api'
    import UploadDialog from './children/UploadDialog'

    export default {
        name: "Employee",
        data() {
            return {
                keyword: '',
                selectDepartment: -1,
                departments: [],
                employees: [],
                pageSize: 10,
                currentPage: 1,
                selectEIds: [],
                total: 0,
                dialogVisible: false
            }
        },
        components: {
            UploadDialog
        },
        methods: {
            // 请求员工列表
            queryEmployeeData() {
                getEmployeesApi({
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword,
                    deptId: this.selectDepartment
                }).then(res => {
                    if (res.success === true) {
                        this.employees = res.data.list
                        this.total = res.data.total
                    }
                })
            },
            // 跳转到添加员工页面
            addEmployPage() {
                this.$router.push({path: '/employee/add'})
            },
            editEmployee(row) {
                this.$router.push({path: `/employee/edit/${row.id}`})
            },
            delEmployee(row) {
                this.$confirm('此操作将删除改员工', '删除员工提示', {
                    cancelButtonText: '否',
                    confirmButtonText: '是'
                }).then(() => {
                    delEmployeeApi({
                        id: row.id
                    }).then(res => {
                        if (res.success === true) {
                            this.$message.success('删除成功！')
                            this.queryEmployeeData()
                        }
                    })
                }).catch(() => {

                })
            },
            employeeSelChange(val) {
                console.log(val);
                this.selectEIds = val
            },
            // 删除多个员工信息
            deleteEmployees(val) {
                if (this.selectEIds.length > 0) {
                    const ids = this.selectEIds.map(employee => employee.id) || []
                    delEmployeesApi({
                        ids
                    }).then(res => {
                        if (res.success === true) {
                            this.$message.success('删除成功！')
                            this.queryEmployeeData()
                        }
                    })
                }
            },
            sizeChange(val) {
                this.pageSize = val
                this.queryEmployeeData()
            },
            currentChange(val) {
                this.currentPage = val
                this.queryEmployeeData()
            },
            // 导出excel文件
            exportExcel() {
                const aLink = document.createElement('a')
                document.body.appendChild(aLink)
                aLink.href = exportEmployeeXlsApi + '?token=' + localStorage.getItem('token')
                aLink.click()
                document.body.removeChild(aLink)
            },
            openDialog() {
                this.dialogVisible = true
            },
            closeDialog() {
                this.dialogVisible = false
            }
        },
        created() {
            // 请求部门列表
            getDepartMentsApi({
                currentPage: 1,
                pageSize: 1000
            }).then(res => {
                if (res.success === true) {
                    this.departments = res.data.list
                }
            })
            this.queryEmployeeData()
        }
    }
</script>

<style scoped>

</style>